<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>SSE Client</title>
    <link rel="stylesheet" th:href="@{/css/event.css}"></link>

</head>
<body>
<div id="messages">event stream client: <span id="clientIdDisplay"></span></div>


<h1>PostMessage 发送端</h1>

<div class="container">
    <h2>发送消息到 iframe</h2>
    <input type="text" id="messageInput" placeholder="输入要发送的消息">
    <button onclick="sendMessageToIframe()">发送到 iframe</button>
</div>

<div class="container">
    <h2>发送消息到新窗口</h2>
    <input type="text" id="popupMessageInput" placeholder="输入要发送的消息">
    <button onclick="openReceiverWindow()">打开接收窗口</button>
    <button onclick="sendMessageToPopup()">发送到新窗口</button>
</div>

<div class="container">
    <h2>嵌入的接收页面</h2>
    <iframe id="receiverFrame" th:src="@{/receiver}"></iframe>
</div>

<script th:src="@{/js/event.js}"></script>
<script>
    // 页面加载时自动连接
    window.onload = connect;
</script>

</body>
</html>